<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>银行管理系统</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .container {
            background: white;
            border-radius: 20px;
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
            padding: 40px;
            width: 90%;
            max-width: 500px;
            text-align: center;
        }

        .logo {
            font-size: 2.5em;
            color: #667eea;
            margin-bottom: 30px;
            font-weight: bold;
        }

        .form-group {
            margin-bottom: 20px;
            text-align: left;
        }

        label {
            display: block;
            margin-bottom: 8px;
            color: #333;
            font-weight: 500;
        }

        input, select {
            width: 100%;
            padding: 12px 15px;
            border: 2px solid #e1e5e9;
            border-radius: 10px;
            font-size: 16px;
            transition: border-color 0.3s ease;
        }

        input:focus, select:focus {
            outline: none;
            border-color: #667eea;
        }

        textarea {
            width: 100%;
            padding: 12px 15px;
            border: 2px solid #e1e5e9;
            border-radius: 10px;
            font-size: 16px;
            transition: border-color 0.3s ease;
            resize: vertical;
            min-height: 80px;
            font-family: inherit;
        }

        textarea:focus {
            outline: none;
            border-color: #667eea;
        }

        .btn {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 15px 30px;
            border: none;
            border-radius: 10px;
            font-size: 16px;
            cursor: pointer;
            transition: transform 0.2s ease;
            width: 100%;
            margin-top: 10px;
        }

        .btn:hover {
            transform: translateY(-2px);
        }

        .btn:active {
            transform: translateY(0);
        }

        .btn-secondary {
            background: #6c757d;
        }

        .btn-success {
            background: #28a745;
        }

        .btn-danger {
            background: #dc3545;
        }

        .btn-warning {
            background: #ffc107;
            color: #212529;
        }

        .btn-info {
            background: #17a2b8;
        }

        .btn-primary {
            background: #007bff;
        }

        .message {
            margin-top: 20px;
            padding: 15px;
            border-radius: 10px;
            font-weight: 500;
        }

        .success {
            background-color: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }

        .error {
            background-color: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }

        .hidden {
            display: none;
        }

        .dashboard {
            background: white;
            border-radius: 20px;
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
            padding: 40px;
            width: 95%;
            max-width: 1200px;
            margin: 20px auto;
        }

        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 30px;
            padding-bottom: 20px;
            border-bottom: 2px solid #f0f0f0;
        }

        .user-info {
            font-size: 18px;
            color: #667eea;
            font-weight: bold;
        }

        .logout-btn {
            background: #dc3545;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-size: 14px;
        }

        .menu {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }

        .menu-item {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 20px;
            border-radius: 15px;
            cursor: pointer;
            transition: transform 0.2s ease;
            text-align: center;
            font-weight: 500;
        }

        .menu-item:hover {
            transform: translateY(-5px);
        }

        .form-section {
            background: #f8f9fa;
            padding: 25px;
            border-radius: 15px;
            margin-bottom: 20px;
        }

        .form-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
            margin-bottom: 15px;
        }

        .records-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
            background: white;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }

        .records-table th,
        .records-table td {
            padding: 12px;
            text-align: left;
            border-bottom: 1px solid #e9ecef;
        }

        .records-table th {
            background: #667eea;
            color: white;
            font-weight: 500;
        }

        .records-table tr:hover {
            background: #f8f9fa;
        }

        .back-btn {
            background: #6c757d;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            margin-bottom: 20px;
        }

        .action-buttons {
            display: flex;
            gap: 10px;
            margin-top: 10px;
        }

        .action-buttons .btn {
            width: auto;
            padding: 8px 15px;
            font-size: 14px;
            margin-top: 0;
        }

        .search-section {
            display: flex;
            gap: 10px;
            margin-bottom: 20px;
            align-items: end;
        }

        .search-section input {
            flex: 1;
        }

        .search-section .btn {
            width: auto;
            margin-top: 0;
        }

        .export-section {
            margin-bottom: 20px;
            text-align: right;
        }

        .export-section .btn {
            width: auto;
            margin-top: 0;
        }

        .modal {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.5);
        }

        .modal-content {
            background-color: white;
            margin: 5% auto;
            padding: 30px;
            border-radius: 15px;
            width: 90%;
            max-width: 500px;
            position: relative;
        }

        .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
            cursor: pointer;
        }

        .close:hover {
            color: #000;
        }

        .time-ago {
            color: #666;
            font-size: 12px;
        }
    </style>
</head>
<body>
    <!-- 登录界面 -->
    <div id="loginForm" class="container">
        <div class="logo">🏦 银行管理系统</div>
        
        <div class="form-group">
            <label for="role">选择角色</label>
            <select id="role" onchange="toggleLoginForm()">
                <option value="customer">客户</option>
                <option value="admin">管理员</option>
            </select>
        </div>

        <div class="form-group">
            <label for="username">账号</label>
            <input type="text" id="username" placeholder="请输入账号">
        </div>

        <div class="form-group">
            <label for="password">密码</label>
            <input type="password" id="password" placeholder="请输入密码">
        </div>

        <button class="btn" onclick="login()">登录</button>
        
        <div id="message" class="message hidden"></div>
    </div>

    <!-- 客户主界面 -->
    <div id="customerDashboard" class="dashboard hidden">
        <div class="header">
            <div class="user-info">欢迎，<span id="customerName"></span></div>
            <button class="logout-btn" onclick="logout()">退出登录</button>
        </div>

        <div class="menu">
            <div class="menu-item" onclick="showAccountInfo()">账户信息</div>
            <div class="menu-item" onclick="showDeposit()">存款</div>
            <div class="menu-item" onclick="showWithdraw()">取款</div>
            <div class="menu-item" onclick="showTransfer()">转账</div>
            <div class="menu-item" onclick="showRecords()">交易记录</div>
            <div class="menu-item" onclick="showReportLoss()">挂失</div>
            <div class="menu-item" onclick="showChangePassword()">修改密码</div>
        </div>

        <div id="content"></div>
    </div>

    <!-- 管理员主界面 -->
    <div id="adminDashboard" class="dashboard hidden">
        <div class="header">
            <div class="user-info">管理员控制台</div>
            <button class="logout-btn" onclick="logout()">退出登录</button>
        </div>

        <div class="menu">
            <div class="menu-item" onclick="showCustomerManagement()">客户管理</div>
            <div class="menu-item" onclick="showCardManagement()">银行卡管理</div>
            <div class="menu-item" onclick="showDepositManagement()">存款业务管理</div>
            <div class="menu-item" onclick="showTransactionManagement()">交易管理</div>
        </div>

        <div id="adminContent"></div>
    </div>

    <!-- 模态对话框 -->
    <div id="searchModal" class="modal">
        <div class="modal-content">
            <span class="close" onclick="closeSearchModal()">&times;</span>
            <h3>高级查询</h3>
            <div class="form-group">
                <label for="searchField">查询字段</label>
                <select id="searchField">
                    <option value="customerName">客户姓名</option>
                    <option value="PID">身份证号</option>
                    <option value="telephone">联系电话</option>
                </select>
            </div>
            <div class="form-group">
                <label for="searchValue">查询内容</label>
                <input type="text" id="searchValue" placeholder="请输入查询内容">
            </div>
            <button class="btn" onclick="performSearch()">查询</button>
        </div>
    </div>

    <script>
        let currentUser = null;
        let currentRole = 'customer';
        let currentModule = '';
        let lastAddedName = '';
        let lastAddedPID = '';

        // 切换登录表单
        function toggleLoginForm() {
            currentRole = document.getElementById('role').value;
            const usernameInput = document.getElementById('username');
            const passwordInput = document.getElementById('password');
            
            if (currentRole === 'admin') {
                usernameInput.placeholder = '管理员账号';
                passwordInput.placeholder = '管理员密码';
            } else {
                usernameInput.placeholder = '银行卡号';
                passwordInput.placeholder = '银行卡密码';
            }
        }

        // 显示消息
        function showMessage(message, isSuccess = true) {
            const messageDiv = document.getElementById('message');
            messageDiv.textContent = message;
            messageDiv.className = `message ${isSuccess ? 'success' : 'error'}`;
            messageDiv.classList.remove('hidden');
            
            setTimeout(() => {
                messageDiv.classList.add('hidden');
            }, 3000);
        }

        // 登录
        async function login() {
            const username = document.getElementById('username').value;
            const password = document.getElementById('password').value;
            const role = document.getElementById('role').value;

            if (!username || !password) {
                showMessage('请输入账号和密码', false);
                return;
            }

            try {
                const response = await fetch('/api/login', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({ username, password, role })
                });

                const data = await response.json();

                if (data.success) {
                    currentUser = data.user;
                    showMessage(data.msg, true);
                    
                    if (role === 'customer') {
                        document.getElementById('loginForm').classList.add('hidden');
                        document.getElementById('customerDashboard').classList.remove('hidden');
                        document.getElementById('customerName').textContent = currentUser.customerName;
                    } else {
                        document.getElementById('loginForm').classList.add('hidden');
                        document.getElementById('adminDashboard').classList.remove('hidden');
                    }
                } else {
                    showMessage(data.msg, false);
                }
            } catch (error) {
                showMessage('网络错误，请稍后重试', false);
            }
        }

        // 退出登录
        function logout() {
            currentUser = null;
            document.getElementById('loginForm').classList.remove('hidden');
            document.getElementById('customerDashboard').classList.add('hidden');
            document.getElementById('adminDashboard').classList.add('hidden');
            document.getElementById('username').value = '';
            document.getElementById('password').value = '';
        }

        // 客户功能
        async function showAccountInfo() {
            try {
                const response = await fetch(`/api/account_info?cardid=${currentUser.cardID}`);
                const data = await response.json();

                if (data.success) {
                    const account = data.account;
                    document.getElementById('content').innerHTML = `
                        <div class="form-section">
                            <h3>账户信息</h3>
                            <div class="form-row">
                                <div><strong>卡号：</strong>${account.cardID}</div>
                                <div><strong>客户姓名：</strong>${account.customerName}</div>
                            </div>
                            <div class="form-row">
                                <div><strong>存款类型：</strong>${account.savingName || '未知'}</div>
                                <div><strong>余额：</strong>￥${account.balance}</div>
                            </div>
                            <div class="form-row">
                                <div><strong>开户日期：</strong>${account.openDate}</div>
                                <div><strong>状态：</strong>${account.IsReportLoss === '是' ? '已挂失' : '正常'}</div>
                            </div>
                        </div>
                    `;
                } else {
                    showMessage(data.msg, false);
                }
            } catch (error) {
                showMessage('获取账户信息失败', false);
            }
        }

        async function showDeposit() {
            document.getElementById('content').innerHTML = `
                <div class="form-section">
                    <h3>存款</h3>
                    <div class="form-group">
                        <label for="depositAmount">存款金额</label>
                        <input type="number" id="depositAmount" placeholder="请输入存款金额" step="0.01" min="0">
                    </div>
                    <button class="btn" onclick="deposit()">确认存款</button>
                </div>
            `;
        }

        async function deposit() {
            const amount = document.getElementById('depositAmount').value;
            if (!amount || amount <= 0) {
                showMessage('请输入有效的存款金额', false);
                return;
            }

            try {
                const response = await fetch('/api/deposit', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        cardid: currentUser.cardID,
                        amount: parseFloat(amount)
                    })
                });

                const data = await response.json();
                showMessage(data.msg, data.success);
                
                if (data.success) {
                    document.getElementById('depositAmount').value = '';
                }
            } catch (error) {
                showMessage('存款失败，请稍后重试', false);
            }
        }

        async function showWithdraw() {
            document.getElementById('content').innerHTML = `
                <div class="form-section">
                    <h3>取款</h3>
                    <div class="form-group">
                        <label for="withdrawAmount">取款金额</label>
                        <input type="number" id="withdrawAmount" placeholder="请输入取款金额" step="0.01" min="0">
                    </div>
                    <div class="form-group">
                        <label for="withdrawPassword">银行卡密码</label>
                        <input type="password" id="withdrawPassword" placeholder="请输入银行卡密码">
                    </div>
                    <button class="btn" onclick="withdraw()">确认取款</button>
                </div>
            `;
        }

        async function withdraw() {
            const amount = document.getElementById('withdrawAmount').value;
            const password = document.getElementById('withdrawPassword').value;

            if (!amount || amount <= 0) {
                showMessage('请输入有效的取款金额', false);
                return;
            }
            if (!password) {
                showMessage('请输入银行卡密码', false);
                return;
            }

            try {
                const response = await fetch('/api/withdraw', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        cardid: currentUser.cardID,
                        amount: parseFloat(amount),
                        password: password
                    })
                });

                const data = await response.json();
                showMessage(data.msg, data.success);
                
                if (data.success) {
                    document.getElementById('withdrawAmount').value = '';
                    document.getElementById('withdrawPassword').value = '';
                }
            } catch (error) {
                showMessage('取款失败，请稍后重试', false);
            }
        }

        async function showTransfer() {
            document.getElementById('content').innerHTML = `
                <div class="form-section">
                    <h3>转账</h3>
                    <div class="form-group">
                        <label for="toCard">转入卡号</label>
                        <input type="text" id="toCard" placeholder="请输入转入卡号">
                    </div>
                    <div class="form-group">
                        <label for="transferAmount">转账金额</label>
                        <input type="number" id="transferAmount" placeholder="请输入转账金额" step="0.01" min="0">
                    </div>
                    <div class="form-group">
                        <label for="transferPassword">银行卡密码</label>
                        <input type="password" id="transferPassword" placeholder="请输入银行卡密码">
                    </div>
                    <button class="btn" onclick="transfer()">确认转账</button>
                </div>
            `;
        }

        async function transfer() {
            const toCard = document.getElementById('toCard').value;
            const amount = document.getElementById('transferAmount').value;
            const password = document.getElementById('transferPassword').value;

            if (!toCard) {
                showMessage('请输入转入卡号', false);
                return;
            }
            if (!amount || amount <= 0) {
                showMessage('请输入有效的转账金额', false);
                return;
            }
            if (!password) {
                showMessage('请输入银行卡密码', false);
                return;
            }

            try {
                const response = await fetch('/api/transfer', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        from_card: currentUser.cardID,
                        to_card: toCard,
                        amount: parseFloat(amount),
                        password: password
                    })
                });

                const data = await response.json();
                showMessage(data.msg, data.success);
                
                if (data.success) {
                    document.getElementById('toCard').value = '';
                    document.getElementById('transferAmount').value = '';
                    document.getElementById('transferPassword').value = '';
                }
            } catch (error) {
                showMessage('转账失败，请稍后重试', false);
            }
        }

        async function showRecords() {
            try {
                const response = await fetch(`/api/records?cardid=${currentUser.cardID}`);
                const data = await response.json();

                if (data.success) {
                    let recordsHtml = `
                        <div class="form-section">
                            <h3>交易记录</h3>
                            <table class="records-table">
                                <thead>
                                    <tr>
                                        <th>交易时间</th>
                                        <th>交易类型</th>
                                        <th>交易金额</th>
                                        <th>备注</th>
                                    </tr>
                                </thead>
                                <tbody>
                    `;

                    data.records.forEach(record => {
                        const amount = record.tradeMoney;
                        const amountText = amount >= 0 ? `+￥${amount}` : `-￥${Math.abs(amount)}`;
                        const amountColor = amount >= 0 ? 'green' : 'red';
                        const timeAgo = getTimeAgo(record.tradeDate);
                        
                        recordsHtml += `
                            <tr>
                                <td>${record.tradeDate}<br><span class="time-ago">${timeAgo}</span></td>
                                <td>${record.tradeType}</td>
                                <td style="color: ${amountColor}">${amountText}</td>
                                <td>${record.remark || ''}</td>
                            </tr>
                        `;
                    });

                    recordsHtml += `
                                </tbody>
                            </table>
                        </div>
                    `;

                    document.getElementById('content').innerHTML = recordsHtml;
                } else {
                    showMessage(data.msg, false);
                }
            } catch (error) {
                showMessage('获取交易记录失败', false);
            }
        }

        function getTimeAgo(dateString) {
            const now = new Date();
            const date = new Date(dateString);
            const diffMs = now - date;
            const diffMins = Math.floor(diffMs / 60000);
            const diffHours = Math.floor(diffMs / 3600000);
            const diffDays = Math.floor(diffMs / 86400000);

            if (diffMins < 1) return '刚刚';
            if (diffMins < 60) return `${diffMins}分钟前`;
            if (diffHours < 24) return `${diffHours}小时前`;
            if (diffDays < 30) return `${diffDays}天前`;
            return date.toLocaleDateString();
        }

        async function showReportLoss() {
            document.getElementById('content').innerHTML = `
                <div class="form-section">
                    <h3>挂失</h3>
                    <div class="form-group">
                        <label for="lossReason">挂失原因</label>
                        <input type="text" id="lossReason" placeholder="请输入挂失原因">
                    </div>
                    <button class="btn" onclick="reportLoss()">确认挂失</button>
                </div>
            `;
        }

        async function reportLoss() {
            const reason = document.getElementById('lossReason').value;
            if (!reason) {
                showMessage('请输入挂失原因', false);
                return;
            }

            try {
                const response = await fetch('/api/report_loss', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        cardid: currentUser.cardID,
                        reason: reason
                    })
                });

                const data = await response.json();
                showMessage(data.msg, data.success);
                
                if (data.success) {
                    document.getElementById('lossReason').value = '';
                }
            } catch (error) {
                showMessage('挂失失败，请稍后重试', false);
            }
        }

        async function showChangePassword() {
            document.getElementById('content').innerHTML = `
                <div class="form-section">
                    <h3>修改密码</h3>
                    <div class="form-group">
                        <label for="oldPassword">原密码</label>
                        <input type="password" id="oldPassword" placeholder="请输入原密码">
                    </div>
                    <div class="form-group">
                        <label for="newPassword">新密码</label>
                        <input type="password" id="newPassword" placeholder="请输入新密码">
                    </div>
                    <div class="form-group">
                        <label for="confirmPassword">确认新密码</label>
                        <input type="password" id="confirmPassword" placeholder="请再次输入新密码">
                    </div>
                    <button class="btn" onclick="changePassword()">确认修改</button>
                </div>
            `;
        }

        async function changePassword() {
            const oldPassword = document.getElementById('oldPassword').value;
            const newPassword = document.getElementById('newPassword').value;
            const confirmPassword = document.getElementById('confirmPassword').value;

            if (!oldPassword || !newPassword || !confirmPassword) {
                showMessage('请填写所有密码字段', false);
                return;
            }
            if (newPassword !== confirmPassword) {
                showMessage('两次输入的新密码不一致', false);
                return;
            }

            try {
                const response = await fetch('/api/change_password', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        cardid: currentUser.cardID,
                        old_password: oldPassword,
                        new_password: newPassword
                    })
                });

                const data = await response.json();
                showMessage(data.msg, data.success);
                
                if (data.success) {
                    document.getElementById('oldPassword').value = '';
                    document.getElementById('newPassword').value = '';
                    document.getElementById('confirmPassword').value = '';
                }
            } catch (error) {
                showMessage('密码修改失败，请稍后重试', false);
            }
        }

        // 管理员功能
        async function showCustomerManagement() {
            currentModule = 'customers';
            try {
                const response = await fetch('/api/admin/customers');
                const data = await response.json();

                if (data.success) {
                    renderCustomerTable(data.data);
                } else {
                    showMessage(data.msg, false);
                }
            } catch (error) {
                showMessage('获取客户列表失败', false);
            }
        }
        window.showCustomerManagement = showCustomerManagement;

        async function showCardManagement() {
            currentModule = 'cards';
            try {
                const response = await fetch('/api/admin/cards');
                const data = await response.json();
                if (data.success) {
                    renderCardTable(data.data);
                } else {
                    showMessage(data.msg, false);
                }
            } catch (error) {
                showMessage('获取银行卡列表失败', false);
            }
        }
        window.showCardManagement = showCardManagement;

        async function showDepositManagement() {
            currentModule = 'deposits';
            try {
                const response = await fetch('/api/admin/deposits');
                const data = await response.json();
                if (data.success) {
                    renderDepositTable(data.data);
                } else {
                    showMessage(data.msg, false);
                }
            } catch (error) {
                showMessage('获取存款业务列表失败', false);
            }
        }
        window.showDepositManagement = showDepositManagement;

        async function showTransactionManagement() {
            currentModule = 'transactions';
            try {
                const response = await fetch('/api/admin/transactions');
                const data = await response.json();
                if (data.success) {
                    renderTransactionTable(data.data);
                } else {
                    showMessage(data.msg, false);
                }
            } catch (error) {
                showMessage('获取交易列表失败', false);
            }
        }
        window.showTransactionManagement = showTransactionManagement;

        // 搜索功能
        function handleSearchKeyPress(event) {
            if (event.key === 'Enter') {
                switch (currentModule) {
                    case 'customers':
                        searchCustomers();
                        break;
                    case 'cards':
                        searchCards();
                        break;
                    case 'deposits':
                        searchDeposits();
                        break;
                    case 'transactions':
                        searchTransactions();
                        break;
                }
            }
        }

        async function searchCustomers() {
            const searchValue = document.getElementById('customerSearch').value;
            try {
                const response = await fetch(`/api/admin/customers?pid=${searchValue}`);
                const data = await response.json();
                if (data.success) {
                    // 直接渲染搜索结果
                    renderCustomerTable(data.data);
                } else {
                    showMessage(data.msg, false);
                }
            } catch (error) {
                showMessage('搜索失败', false);
            }
        }

        async function searchCards() {
            const searchValue = document.getElementById('cardSearch').value;
            try {
                const response = await fetch(`/api/admin/cards?cardid=${searchValue}`);
                const data = await response.json();
                if (data.success) {
                    // 直接渲染搜索结果
                    renderCardTable(data.data);
                } else {
                    showMessage(data.msg, false);
                }
            } catch (error) {
                showMessage('搜索失败', false);
            }
        }

        async function searchDeposits() {
            const searchValue = document.getElementById('depositSearch').value;
            try {
                const response = await fetch(`/api/admin/deposits?saving_name=${searchValue}`);
                const data = await response.json();
                if (data.success) {
                    // 直接渲染搜索结果
                    renderDepositTable(data.data);
                } else {
                    showMessage(data.msg, false);
                }
            } catch (error) {
                showMessage('搜索失败', false);
            }
        }

        async function searchTransactions() {
            const searchValue = document.getElementById('transactionSearch').value;
            try {
                const response = await fetch(`/api/admin/transactions?cardid=${searchValue}`);
                const data = await response.json();
                if (data.success) {
                    // 直接渲染搜索结果
                    renderTransactionTable(data.data);
                } else {
                    showMessage(data.msg, false);
                }
            } catch (error) {
                showMessage('搜索失败', false);
            }
        }

        // 渲染函数
        function renderCustomerTable(customers) {
            // 调试输出
            console.log('【前端调试】客户数据:', customers);
            let html = `
                <div class="form-section">
                    <h3>客户管理</h3>
                    <div class="search-section">
                        <input type="text" id="customerSearch" placeholder="输入身份证号搜索" onkeypress="handleSearchKeyPress(event)">
                        <button class="btn btn-secondary" onclick="searchCustomers()">搜索</button>
                        <button class="btn btn-info" onclick="showSearchModal()">高级查询</button>
                    </div>
                    <div class="export-section">
                        <button class="btn btn-success" onclick="exportCustomers()">导出CSV</button>
                        <button class="btn btn-primary" onclick="showAddCustomerForm()">新增客户</button>
                    </div>
                    <table class="records-table">
                        <thead>
                            <tr>
                                <th>客户编号</th>
                                <th>客户姓名</th>
                                <th>身份证号</th>
                                <th>联系电话</th>
                                <th>联系地址</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
            `;
            customers.forEach(customer => {
                // 调试每个客户的数据
                console.log('【前端调试】单个客户数据:', customer);
                console.log('【前端调试】客户姓名:', customer.customerName, '类型:', typeof customer.customerName);
                html += `
                    <tr>
                        <td>${customer.customerID}</td>
                        <td>${customer.customerName && customer.customerName.trim() ? customer.customerName : '（未填写）'}</td>
                        <td>${customer.PID}</td>
                        <td>${customer.telephone}</td>
                        <td>${customer.address || ''}</td>
                        <td>
                            <div class="action-buttons">
                                <button class="btn btn-warning" onclick="editCustomer(${customer.customerID})">编辑</button>
                                <button class="btn btn-danger" onclick="deleteCustomer(${customer.customerID})">删除</button>
                            </div>
                        </td>
                    </tr>
                `;
            });
            html += `
                        </tbody>
                    </table>
                </div>
            `;
            document.getElementById('adminContent').innerHTML = html;
        }

        function renderCardTable(cards) {
            let html = `
                <div class="form-section">
                    <h3>银行卡管理</h3>
                    <div class="search-section">
                        <input type="text" id="cardSearch" placeholder="输入卡号搜索" onkeypress="handleSearchKeyPress(event)">
                        <button class="btn btn-secondary" onclick="searchCards()">搜索</button>
                    </div>
                    <div class="export-section">
                        <button class="btn btn-success" onclick="exportCards()">导出CSV</button>
                        <button class="btn btn-primary" onclick="showAddCardForm()">新增银行卡</button>
                    </div>
                    <table class="records-table">
                        <thead>
                            <tr>
                                <th>卡号</th>
                                <th>客户姓名</th>
                                <th>存款类型</th>
                                <th>余额</th>
                                <th>状态</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
            `;

            cards.forEach(card => {
                html += `
                    <tr>
                        <td>${card.cardID}</td>
                        <td>${card.customerName}</td>
                        <td>${card.savingName || '未知'}</td>
                        <td>￥${card.balance}</td>
                        <td>${card.IsReportLoss === '是' ? '已挂失' : '正常'}</td>
                        <td>
                            <div class="action-buttons">
                                <button class="btn btn-warning" onclick="editCard('${card.cardID}')">编辑</button>
                                <button class="btn btn-danger" onclick="deleteCard('${card.cardID}')">删除</button>
                            </div>
                        </td>
                    </tr>
                `;
            });

            html += `
                        </tbody>
                    </table>
                </div>
            `;

            document.getElementById('adminContent').innerHTML = html;
        }

        function renderDepositTable(deposits) {
            let html = `
                <div class="form-section">
                    <h3>存款业务管理</h3>
                    <div class="search-section">
                        <input type="text" id="depositSearch" placeholder="输入业务名称搜索" onkeypress="handleSearchKeyPress(event)">
                        <button class="btn btn-secondary" onclick="searchDeposits()">搜索</button>
                    </div>
                    <div class="export-section">
                        <button class="btn btn-success" onclick="exportDeposits()">导出CSV</button>
                        <button class="btn btn-primary" onclick="showAddDepositForm()">新增存款业务</button>
                    </div>
                    <table class="records-table">
                        <thead>
                            <tr>
                                <th>业务编号</th>
                                <th>业务名称</th>
                                <th>业务描述</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
            `;

            deposits.forEach(deposit => {
                html += `
                    <tr>
                        <td>${deposit.savingID}</td>
                        <td>${deposit.savingName}</td>
                        <td>${deposit.descrip || ''}</td>
                        <td>
                            <div class="action-buttons">
                                <button class="btn btn-warning" onclick="editDeposit(${deposit.savingID})">编辑</button>
                                <button class="btn btn-danger" onclick="deleteDeposit(${deposit.savingID})">删除</button>
                            </div>
                        </td>
                    </tr>
                `;
            });

            html += `
                        </tbody>
                    </table>
                </div>
            `;

            document.getElementById('adminContent').innerHTML = html;
        }

        function renderTransactionTable(transactions) {
            let html = `
                <div class="form-section">
                    <h3>交易管理</h3>
                    <div class="search-section">
                        <input type="text" id="transactionSearch" placeholder="输入卡号搜索" onkeypress="handleSearchKeyPress(event)">
                        <button class="btn btn-secondary" onclick="searchTransactions()">搜索</button>
                    </div>
                    <div class="export-section">
                        <button class="btn btn-success" onclick="exportTransactions()">导出CSV</button>
                    </div>
                    <table class="records-table">
                        <thead>
                            <tr>
                                <th>交易时间</th>
                                <th>交易类型</th>
                                <th>卡号</th>
                                <th>客户姓名</th>
                                <th>交易金额</th>
                                <th>备注</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
            `;

            transactions.forEach(transaction => {
                const amount = transaction.tradeMoney;
                const amountText = amount >= 0 ? `+￥${amount}` : `-￥${Math.abs(amount)}`;
                const amountColor = amount >= 0 ? 'green' : 'red';
                const timeAgo = getTimeAgo(transaction.tradeDate);
                
                html += `
                    <tr>
                        <td>${transaction.tradeDate}<br><span class="time-ago">${timeAgo}</span></td>
                        <td>${transaction.tradeType}</td>
                        <td>${transaction.cardID}</td>
                        <td>${transaction.customerName}</td>
                        <td style="color: ${amountColor}">${amountText}</td>
                        <td>${transaction.remark || ''}</td>
                        <td>
                            <div class="action-buttons">
                                <button class="btn btn-danger" onclick="deleteTransaction(${transaction.tradeID})">删除</button>
                            </div>
                        </td>
                    </tr>
                `;
            });

            html += `
                        </tbody>
                    </table>
                </div>
            `;

            document.getElementById('adminContent').innerHTML = html;
        }

        // 模态对话框功能
        function showSearchModal() {
            document.getElementById('searchModal').style.display = 'block';
        }

        function closeSearchModal() {
            document.getElementById('searchModal').style.display = 'none';
        }

        async function performSearch() {
            const searchField = document.getElementById('searchField').value;
            const searchValue = document.getElementById('searchValue').value;
            
            if (!searchValue) {
                showMessage('请输入查询内容', false);
                return;
            }

            try {
                const response = await fetch('/api/admin/advanced_search', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        entity_type: 'customers',
                        search_type: 'fuzzy',
                        search_field: searchField,
                        search_value: searchValue
                    })
                });

                const data = await response.json();
                if (data.success) {
                    closeSearchModal();
                    // 直接渲染搜索结果
                    renderCustomerTable(data.data);
                } else {
                    showMessage(data.msg, false);
                }
            } catch (error) {
                showMessage('高级查询失败', false);
            }
        }

        // CSV导出功能
        function exportCustomers() {
            window.open('/api/admin/customers/export', '_blank');
        }

        function exportCards() {
            window.open('/api/admin/cards/export', '_blank');
        }

        function exportDeposits() {
            window.open('/api/admin/deposits/export', '_blank');
        }

        function exportTransactions() {
            window.open('/api/admin/transactions/export', '_blank');
        }

        // 新增功能
        function showAddCustomerForm() {
            document.getElementById('adminContent').innerHTML = `
                <div class="form-section">
                    <h3>新增客户</h3>
                    <button class="back-btn" onclick="showCustomerManagement()">返回客户管理</button>
                    <form id="addCustomerForm" onsubmit="addCustomer(event)">
                        <div class="form-group">
                            <label for="customerName">客户姓名</label>
                            <input type="text" id="customerName" name="customerName" required placeholder="请输入客户姓名">
                        </div>
                        <div class="form-group">
                            <label for="PID">身份证号</label>
                            <input type="text" id="PID" name="PID" required placeholder="请输入身份证号">
                        </div>
                        <div class="form-group">
                            <label for="telephone">联系电话</label>
                            <input type="text" id="telephone" name="telephone" required placeholder="请输入联系电话">
                        </div>
                        <div class="form-group">
                            <label for="address">联系地址</label>
                            <input type="text" id="address" name="address" required placeholder="请输入联系地址">
                        </div>
                        <button type="submit" class="btn btn-primary">确认新增</button>
                        <button type="button" class="btn btn-secondary" onclick="showCustomerManagement()">取消</button>
                    </form>
                </div>
            `;
        }

        function showAddCardForm() {
            Promise.all([
                fetch('/api/admin/customers').then(res => res.json()),
                fetch('/api/admin/deposits').then(res => res.json())
            ]).then(([customersData, depositsData]) => {
                let customersOptions = '';
                let depositsOptions = '';

                if (customersData.success) {
                    customersData.data.forEach(customer => {
                        customersOptions += `<option value="${customer.customerID}">${customer.customerName} (${customer.customerID})</option>`;
                    });
                }

                if (depositsData.success) {
                    depositsData.deposits.forEach(deposit => {
                        depositsOptions += `<option value="${deposit.savingID}">${deposit.savingName}</option>`;
                    });
                }

                document.getElementById('adminContent').innerHTML = `
                    <div class="form-section">
                        <h3>新增银行卡</h3>
                        <button class="back-btn" onclick="showCardManagement()">返回银行卡管理</button>
                        <form id="addCardForm">
                            <div class="form-group">
                                <label for="cardID">银行卡号</label>
                                <input type="text" id="cardID" name="cardID" required placeholder="请输入银行卡号">
                            </div>
                            <div class="form-group">
                                <label for="customerID">客户</label>
                                <select id="customerID" name="customerID" required>
                                    <option value="">请选择客户</option>
                                    ${customersOptions}
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="savingID">存款类型</label>
                                <select id="savingID" name="savingID" required>
                                    <option value="">请选择存款类型</option>
                                    ${depositsOptions}
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="balance">初始余额</label>
                                <input type="number" id="balance" name="balance" step="0.01" min="0" value="0" placeholder="请输入初始余额">
                            </div>
                            <div class="form-group">
                                <label for="pass">银行卡密码</label>
                                <input type="password" id="pass" name="pass" required placeholder="请输入银行卡密码">
                            </div>
                            <button type="submit" class="btn btn-primary">确认新增</button>
                            <button type="button" class="btn btn-secondary" onclick="showCardManagement()">取消</button>
                        </form>
                    </div>
                `;

                document.getElementById('addCardForm').addEventListener('submit', addCard);
            }).catch(error => {
                showMessage('获取数据失败', false);
            });
        }

        async function addCard(event) {
            event.preventDefault();
            const formData = {
                cardID: document.getElementById('cardID').value,
                customerID: document.getElementById('customerID').value,
                savingID: document.getElementById('savingID').value,
                balance: parseFloat(document.getElementById('balance').value),
                pass: document.getElementById('pass').value,
                IsReportLoss: '否'
            };
            try {
                const response = await fetch('/api/admin/cards', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify(formData)
                });
                const data = await response.json();
                showMessage(data.msg, data.success);
                if (data.success) showCardManagement();
            } catch (error) {
                showMessage('新增银行卡失败', false);
            }
        }

        function showAddDepositForm() {
            document.getElementById('adminContent').innerHTML = `
                <div class="form-section">
                    <h3>新增存款业务</h3>
                    <button class="back-btn" onclick="showDepositManagement()">返回存款业务管理</button>
                    <form id="addDepositForm">
                        <div class="form-group">
                            <label for="savingName">业务名称</label>
                            <input type="text" id="savingName" name="savingName" required placeholder="请输入业务名称">
                        </div>
                        <div class="form-group">
                            <label for="descrip">业务描述</label>
                            <textarea id="descrip" name="descrip" rows="3" placeholder="请输入业务描述"></textarea>
                        </div>
                        <button type="submit" class="btn btn-primary">确认新增</button>
                        <button type="button" class="btn btn-secondary" onclick="showDepositManagement()">取消</button>
                    </form>
                </div>
            `;
            document.getElementById('addDepositForm').addEventListener('submit', addDeposit);
        }

        async function addDeposit(event) {
            event.preventDefault();
            const formData = {
                savingName: document.getElementById('savingName').value,
                descrip: document.getElementById('descrip').value
            };
            try {
                const response = await fetch('/api/admin/deposits', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify(formData)
                });
                const data = await response.json();
                showMessage(data.msg, data.success);
                if (data.success) showDepositManagement();
            } catch (error) {
                showMessage('新增存款业务失败', false);
            }
        }

        // 新增提交函数
        async function addCustomer(event) {
            event.preventDefault();
            const formData = {
                customerName: document.getElementById('customerName').value,
                PID: document.getElementById('PID').value,
                telephone: document.getElementById('telephone').value,
                address: document.getElementById('address').value
            };
            try {
                const response = await fetch('/api/admin/customers', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify(formData)
                });
                const data = await response.json();
                showMessage(data.msg, data.success);
                if (data.success) {
                    showCustomerManagement();
                }
            } catch (error) {
                showMessage('新增客户失败', false);
            }
        }

        // 页面加载时初始化
        document.addEventListener('DOMContentLoaded', function() {
            toggleLoginForm();
        });

        // 点击模态对话框外部关闭
        window.onclick = function(event) {
            const modal = document.getElementById('searchModal');
            if (event.target === modal) {
                closeSearchModal();
            }
        }

        // ==================== 编辑和删除功能 ====================

        // 客户编辑和删除
        async function editCustomer(customerID) {
            try {
                const response = await fetch(`/api/admin/customers/${customerID}`);
                const data = await response.json();
                
                if (data.success) {
                    const customer = data.customer;
                    document.getElementById('adminContent').innerHTML = `
                        <div class="form-section">
                            <h3>编辑客户</h3>
                            <button class="back-btn" onclick="showCustomerManagement()">返回客户管理</button>
                            <form id="editCustomerForm">
                                <div class="form-group">
                                    <label for="editCustomerName">客户姓名</label>
                                    <input type="text" id="editCustomerName" name="customerName" value="${customer.customerName || ''}" required>
                                </div>
                                <div class="form-group">
                                    <label for="editPID">身份证号</label>
                                    <input type="text" id="editPID" name="PID" value="${customer.PID}" required>
                                </div>
                                <div class="form-group">
                                    <label for="editTelephone">联系电话</label>
                                    <input type="text" id="editTelephone" name="telephone" value="${customer.telephone}" required>
                                </div>
                                <div class="form-group">
                                    <label for="editAddress">联系地址</label>
                                    <input type="text" id="editAddress" name="address" value="${customer.address || ''}" required>
                                </div>
                                <button type="submit" class="btn btn-warning">确认修改</button>
                                <button type="button" class="btn btn-secondary" onclick="showCustomerManagement()">取消</button>
                            </form>
                        </div>
                    `;

                    document.getElementById('editCustomerForm').addEventListener('submit', function(event) {
                        event.preventDefault();
                        updateCustomer(customerID);
                    });
                } else {
                    showMessage(data.msg, false);
                }
            } catch (error) {
                showMessage('获取客户信息失败', false);
            }
        }

        async function updateCustomer(customerID) {
            const formData = {
                customerName: document.getElementById('editCustomerName').value,
                PID: document.getElementById('editPID').value,
                telephone: document.getElementById('editTelephone').value,
                address: document.getElementById('editAddress').value
            };

            try {
                const response = await fetch(`/api/admin/customers/${customerID}`, {
                    method: 'PUT',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(formData)
                });

                const data = await response.json();
                showMessage(data.msg, data.success);
                
                if (data.success) {
                    showCustomerManagement();
                }
            } catch (error) {
                showMessage('更新客户失败', false);
            }
        }

        async function deleteCustomer(customerID) {
            if (!confirm('确定要删除这个客户吗？此操作不可恢复。')) {
                return;
            }

            try {
                const response = await fetch(`/api/admin/customers/${customerID}`, {
                    method: 'DELETE'
                });

                const data = await response.json();
                showMessage(data.msg, data.success);
                
                if (data.success) {
                    showCustomerManagement();
                }
            } catch (error) {
                showMessage('删除客户失败', false);
            }
        }

        // 银行卡编辑和删除
        async function editCard(cardID) {
            try {
                const response = await fetch(`/api/admin/cards/${cardID}`);
                const data = await response.json();
                
                if (data.success) {
                    const card = data.card;
                    const [customersData, depositsData] = await Promise.all([
                        fetch('/api/admin/customers').then(res => res.json()),
                        fetch('/api/admin/deposits').then(res => res.json())
                    ]);
                    let customersOptions = '';
                    let depositsOptions = '';

                    if (customersData.success) {
                        customersData.data.forEach(customer => {
                            const selected = customer.customerID == card.customerID ? 'selected' : '';
                            customersOptions += `<option value="${customer.customerID}" ${selected}>${customer.customerName} (${customer.customerID})</option>`;
                        });
                    }

                    if (depositsData.success) {
                        depositsData.deposits.forEach(deposit => {
                            const selected = deposit.savingID == card.savingID ? 'selected' : '';
                            depositsOptions += `<option value="${deposit.savingID}" ${selected}>${deposit.savingName}</option>`;
                        });
                    }

                    document.getElementById('adminContent').innerHTML = `
                        <div class="form-section">
                            <h3>编辑银行卡</h3>
                            <button class="back-btn" onclick="showCardManagement()">返回银行卡管理</button>
                            <form id="editCardForm">
                                <div class="form-group">
                                    <label for="editCardID">银行卡号</label>
                                    <input type="text" id="editCardID" name="cardID" value="${card.cardID}" readonly>
                                </div>
                                <div class="form-group">
                                    <label for="editCustomerID">客户</label>
                                    <select id="editCustomerID" name="customerID" required>
                                        <option value="">请选择客户</option>
                                        ${customersOptions}
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label for="editSavingID">存款类型</label>
                                    <select id="editSavingID" name="savingID" required>
                                        <option value="">请选择存款类型</option>
                                        ${depositsOptions}
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label for="editBalance">余额</label>
                                    <input type="number" id="editBalance" name="balance" step="0.01" min="0" value="${card.balance}" required>
                                </div>
                                <div class="form-group">
                                    <label for="editPass">银行卡密码</label>
                                    <input type="password" id="editPass" name="pass" value="${card.pass}" required>
                                </div>
                                <div class="form-group">
                                    <label for="editIsReportLoss">是否挂失</label>
                                    <select id="editIsReportLoss" name="IsReportLoss" required>
                                        <option value="否" ${card.IsReportLoss === '否' ? 'selected' : ''}>否</option>
                                        <option value="是" ${card.IsReportLoss === '是' ? 'selected' : ''}>是</option>
                                    </select>
                                </div>
                                <button type="submit" class="btn btn-warning">确认修改</button>
                                <button type="button" class="btn btn-secondary" onclick="showCardManagement()">取消</button>
                            </form>
                        </div>
                    `;

                    document.getElementById('editCardForm').addEventListener('submit', function(event) {
                        event.preventDefault();
                        updateCard(cardID);
                    });
                } else {
                    showMessage(data.msg, false);
                }
            } catch (error) {
                showMessage('获取银行卡信息失败', false);
            }
        }

        async function updateCard(cardID) {
            const formData = {
                customerID: document.getElementById('editCustomerID').value,
                savingID: document.getElementById('editSavingID').value,
                balance: parseFloat(document.getElementById('editBalance').value),
                pass: document.getElementById('editPass').value,
                IsReportLoss: document.getElementById('editIsReportLoss').value
            };

            try {
                const response = await fetch(`/api/admin/cards/${cardID}`, {
                    method: 'PUT',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify(formData)
                });
                const data = await response.json();
                showMessage(data.msg, data.success);
                if (data.success) showCardManagement();
            } catch (error) {
                showMessage('更新银行卡失败', false);
            }
        }

        async function deleteCard(cardID) {
            if (!confirm('确定要删除这张银行卡吗？此操作不可恢复。')) return;
            try {
                const response = await fetch(`/api/admin/cards/${cardID}`, { method: 'DELETE' });
                const data = await response.json();
                showMessage(data.msg, data.success);
                if (data.success) showCardManagement();
            } catch (error) {
                showMessage('删除银行卡失败', false);
            }
        }

        // 存款业务编辑和删除
        async function editDeposit(savingID) {
            try {
                const response = await fetch(`/api/admin/deposits/${savingID}`);
                const data = await response.json();
                
                if (data.success) {
                    const deposit = data.deposit;
                    document.getElementById('adminContent').innerHTML = `
                        <div class="form-section">
                            <h3>编辑存款业务</h3>
                            <button class="back-btn" onclick="showDepositManagement()">返回存款业务管理</button>
                            <form id="editDepositForm">
                                <div class="form-group">
                                    <label for="editSavingName">业务名称</label>
                                    <input type="text" id="editSavingName" name="savingName" value="${deposit.savingName}" required>
                                </div>
                                <div class="form-group">
                                    <label for="editDescrip">业务描述</label>
                                    <textarea id="editDescrip" name="descrip" rows="3">${deposit.descrip || ''}</textarea>
                                </div>
                                <button type="submit" class="btn btn-warning">确认修改</button>
                                <button type="button" class="btn btn-secondary" onclick="showDepositManagement()">取消</button>
                            </form>
                        </div>
                    `;

                    document.getElementById('editDepositForm').addEventListener('submit', function(event) {
                        event.preventDefault();
                        updateDeposit(savingID);
                    });
                } else {
                    showMessage(data.msg, false);
                }
            } catch (error) {
                showMessage('获取存款业务信息失败', false);
            }
        }

        async function updateDeposit(savingID) {
            const formData = {
                savingName: document.getElementById('editSavingName').value,
                descrip: document.getElementById('editDescrip').value
            };

            try {
                const response = await fetch(`/api/admin/deposits/${savingID}`, {
                    method: 'PUT',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify(formData)
                });
                const data = await response.json();
                showMessage(data.msg, data.success);
                if (data.success) showDepositManagement();
            } catch (error) {
                showMessage('更新存款业务失败', false);
            }
        }

        async function deleteDeposit(savingID) {
            if (!confirm('确定要删除这个存款业务吗？此操作不可恢复。')) return;
            try {
                const response = await fetch(`/api/admin/deposits/${savingID}`, { method: 'DELETE' });
                const data = await response.json();
                showMessage(data.msg, data.success);
                if (data.success) showDepositManagement();
            } catch (error) {
                showMessage('删除存款业务失败', false);
            }
        }

        // 交易记录删除
        async function deleteTransaction(tradeID) {
            if (!confirm('确定要删除这条交易记录吗？此操作不可恢复。')) return;
            try {
                const response = await fetch(`/api/admin/transactions/${tradeID}`, { method: 'DELETE' });
                const data = await response.json();
                showMessage(data.msg, data.success);
                if (data.success) showTransactionManagement();
            } catch (error) {
                showMessage('删除交易记录失败', false);
            }
        }
    </script>
</body>
</html>